<template>
  <footer>
    <div class="title">
      <span class="iconfont l">&#xe608;</span>
      <p><strong>票面价</strong>是指通过景区指定窗口售卖的纸质门票上标注的价格</p>
    </div>
    <ul class="more">
      <li>
        <span class="iconfont">&#xe70e;</span>机票
      </li>
      <li>
        <span class="iconfont">&#xe602;</span>酒店
      </li>
      <li>
        <span class="iconfont">&#xe68f;</span>公寓
      </li>
      <li>
        <span>更多>></span>
      </li>
    </ul>
    <div class="foot-nav">
      <ul>
        <li><a href="">登录</a></li>
        <li><a href="">我的订单</a></li>
        <li><a href="">最近浏览</a></li>
        <li><a href="">关于我们</a></li>
      </ul>
    </div>
    <ul class="zjtype">
      <li><a href="">触屏版</a></li>
      <li><a href="">电脑版</a></li>
    </ul>
    <p class="bh">Qunar 京ICP备xxxxxxx意见反馈</p>
  </footer>
</template>
<script>
  export default {}
</script>
<style scoped>
  a{
    color:#212121;
  }
  footer{
    font-size: .16rem;
    background-color: #f5f5f5;
    padding-top: .1rem;
  }
  .title{
    line-height: .3rem;
    background-color: #fff;
    padding-left: .1rem;
    /*margin-top: .1rem;*/
  }
  footer .title .iconfont {
    font-size: .12rem;
    float: left;
    line-height: .25rem;
  }
  .title p{
    font-size: .12rem;
    margin-left: .17rem;
  }
  .more{
    padding: .1rem 0;
    overflow: hidden;
    width: 2.65rem;
    margin: 0 auto;
  }
  .more li{
    float: left;
    margin-right: .2rem;
    color: #9e9e9e;
    font-size: .12rem;
    vertical-align: middle;
  }
  .more li .iconfont {
    font-size: .12rem;
  }
  .more li:last-child{
    border-left: 1px solid #9e9e9e;
    padding-left: .1rem;
  }
  .foot-nav{
    border-bottom: 1px solid #cacaca;
  }
  .foot-nav ul{
    overflow: hidden;
    width: 3rem;
    margin:0 auto;
  }
  .foot-nav li{
    float: left;
    margin-right: .2rem;
    font-size: .14rem;
    line-height: .4rem;
  }
  .foot-nav li a{
    color: #25a4bb;
  }
  .zjtype{
    overflow: hidden;
    padding-top: 10px;
    text-align: center;
    width: 1.5rem;
    margin: 0 auto;
  }
  .zjtype li{
    float: left;
    margin-right: .3rem;
  }
  .zjtype li:last-child{
    margin-right: 0;
  }
  .zjtype li:last-child a{
    color: #25a4bb;
  }
  .bh{
    width: 2.6rem;
    margin: 0 auto;
    line-height: .4rem;
    color: #9e9e9e;
  }
</style>
